<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
</head>
<body>
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" id="realname" placeholder="姓名" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-inline">
                   <select id="role">
                       <option value="">角色</option>
                       <option value="1">管理员</option>
                       <option value="2">业务员</option>
                   </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select id="deleted">
                        <option value="">状态</option>
                        <option value="1">在职</option>
                        <option value="2">离职</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn" id="searchBtn"> 查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <hr>
    <table id="dataTable" lay-filter="dataTableFilter"></table>

    <%-- 头工具栏模板 --%>
    <script type="text/html" id="headBtns">
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i> 新增员工
            </button>
        </div>
    </script>
    <%-- 新增数据模板 --%>
    <script type="text/html" id="rowBtns">
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm" lay-event="reset">
                <i class="layui-icon layui-icon-refresh"></i> 重置密码
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">
                <i class="layui-icon layui-icon-delete"></i> 离职
            </button>
        </div>
    </script>

    <script type="text/html" id="addTpl">
       <form class="layui-form layui-form-pane" style="margin-top: 15px;margin-left: 15px">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="realname" placeholder="姓名" autocomplete="off" class="layui-input" lay-verify="required" lay-reqText="姓名不能为空" >
                </div>
            </div>
           <div class="layui-form-item">
               <label class="layui-form-label">用户名</label>
               <div class="layui-input-inline">
                   <input type="text" name="username" placeholder="用户名" autocomplete="off" class="layui-input" lay-verify="required" lay-reqText="用户名不能为空" >
               </div>
           </div>
           <div class="layui-form-item">
               <label class="layui-form-label">密码</label>
               <div class="layui-input-inline">
                   <input type="text" name="password" value="123456"  readonly class="layui-input" >
               </div>
           </div>
           <div class="layui-form-item">
               <label class="layui-form-label">角色</label>
               <div class="layui-input-inline" style="width: 230px">
                   <input type="radio" name="role" value="1"  title="管理员">
                   <input type="radio" name="role" value="2"  title="业务员" checked>
               </div>
           </div>
           <button type="button" id="subBtn" lay-submit lay-filter="subBtnFilter" style="display: none"></button>
       </form>
    </script>
<script src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['table','jquery','layer','form'],function () {
        let table = layui.table;
        let $ = layui.jquery;
        let layer = layui.layer;
        let form = layui.form;
        //渲染表格
        let tabOpt = {
            id:"#dataTableId",
            elem:"#dataTable",
            url:"${pageContext.request.contextPath}/user.do?service=page",
            toolbar:"#headBtns",
            page:true,
            cols:[[
                {type:"checkbox"},
                {field:"username",title:"用户名"},
                {field:"password",title:"密码"},
                {field:"realname",title:"姓名"},
                {field:"role",title:"角色",templet:function (d) {
                        let role = d.role;
                        if (role == 1){
                            return "管理员";
                        }else if (role == 2){
                            return  "业务员";
                        }
                    }},
                {field:"deleted",title:"状态",templet:function (d) {
                        let deleted = d.deleted;
                        if (deleted == 1){
                            return "在职";
                        }else if (deleted == 2){
                            return  "离职";
                        }
                    }},
                {field:"createTime",title:"创建时间"},
                {field:"deletedTime",title:"离职时间"},
                {title:"操作",templet:"#rowBtns",minWidth:200}
            ]],
            parseData:function (rs) {
                return {
                    "code" : rs.code,
                    "msg":rs.msg,
                    "data":rs.data.data,
                    "count":rs.data.count
                }
            },
            response:{ //重新定义响应码的值 从 0 改成200
                statusCode:200
            }
        };
        //进行渲染
        let tabIns = table.render(tabOpt);
        //用户查询
        $("#searchBtn").click(function () {
            let realname = $("#realname").val();
            let role = $("#role").val();
            let deleted = $("#deleted").val();
            //表格数据重载
            tabIns.reload({
                where:{
                    "realname":realname,
                    "role":role,
                    "deleted":deleted
                }
            });
        });
        //行工具栏监听事件
        table.on("tool(dataTableFilter)",function (d) {
            let event = d.event;//事件类型
            let data = d.data;//行数据
            if (event == "reset"){
                layer.msg("重置密码");
                reset(data);//调用重置密码的方法
            }else if (event == "del"){
                layer.msg("删除")
                del(data);//调用删除方法
            }
        })

        /**
         *  根据ID 删除数据
         * @param rowData  行数据
         */
        function  del(rowData) {
            layer.confirm("确定离职吗?",function (index) {
                //使用ajax进行数据请求
                $.get("${pageContext.request.contextPath}/user.do?service=delete",{"id":rowData.id},function (rs) {
                    layer.msg(rs.msg); //将操作结果输出
                    layer.close(index);//关闭指定弹出层
                    //点击查询按钮刷新表格
                    $("#searchBtn").click();
                })
            });
        }
        /**
         * 重置密码的方法
         * @param rowData
         */
        function  reset(rowData) {
            layer.confirm("确定要重置密码吗?",function (index) {
                //使用ajax进行数据请求
                $.get("${pageContext.request.contextPath}/user.do?service=reset",{"id":rowData.id},function (rs) {
                    layer.msg(rs.msg); //将操作结果输出
                    layer.close(index);//关闭指定弹出层
                    //点击查询按钮刷新表格
                    $("#searchBtn").click();
                })
            });
        }
        //表格头工具栏监听事件
        table.on("toolbar(dataTableFilter)",function (d) {
            let event = d.event;
            if (event == "add"){
                add();
            }
        })

        /**
         *  具体的新增方法
         */
        function  add() {
            let larOpt = {
                title:"新增员工",
                type: 1,//html 字符串
                content:$("#addTpl").html(),//
                area:['370px','370px'],//设置宽高
                btn:['确认','取消'],
                btnAlign:"c",//按钮居中
                success:function (layero,index) {
                    form.render();//重新渲染表单
                    //表单提交监听事件
                    form.on("submit(subBtnFilter)",function (d) {
                        let formData = d.field;//表单数据
                        //使用ajax提交
                        $.post("${pageContext.request.contextPath}/user.do?service=add",formData,function (rs) {
                            layer.msg(rs.msg);
                            if (rs.code != 200){
                                return false;
                            }
                            layer.close(index);//关闭弹出层
                            //重新加载表格
                            $("#searchBtn").click();
                        })
                    });
                },
                yes:function (index,layero) {
                    $("#subBtn").click();//手动触发提交按钮的点击
                }
            }
            layer.open(larOpt);
        }



    })
</script>
</body>
</html>
